<template>
  <div class="search-history-item flex-middle" v-if="title">
    <i
      class="icon-time"
      v-if="liconname"
      :style="{ backgroundImage: `url(${liconname})` }"
    ></i>
    <div class="label border-bottom flex1 flex-middle">
      <div class="flex1 line-clamp1">
        {{ title }}
      </div>
      <i
        class="icon-close"
        v-if="riconname"
        @click.stop="$emit('click-close', $event)"
        :style="{ backgroundImage: `url(${riconname})` }"
      ></i>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    title: String,
    lIcon: String,
    rIcon: String,
  },
  setup(props) {
    const liconname = computed(() => {
      const iconmap = {
        time:
          "",
        ser:
          "",
      };

      return props.lIcon ? iconmap[props.lIcon] : "";
    });
    const riconname = computed(() => {
      const iconmap = {
        close:
          "",
      };
      return props.lIcon ? iconmap[props.rIcon] : "";
    });

    return {
      liconname,
      riconname,
    };
  },
});
</script>

<style lang="scss" scoped>
.search-history-item {
  padding: 30px 0;
  font-size: 28px;
  color: #333;
  height: 90px;
  line-height: 90px;
  .icon-time {
    margin: 0 20px;
    width: 30px;
    height: 30px;
    // background-image: url();
  }
  .icon-close {
    // margin-left: 10px;
    width: 24px;
    height: 24px;
    padding: 0 30px;
    background: no-repeat center/25px 25px;
    // url()
  }
}
</style>
